<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script  src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <!--<link rel="stylesheet" href="css/motifyPass.css">-->
   <!--导入样式文件-->
    <!--<link rel="stylesheet" href="css/homepage.css">-->
    <link rel="stylesheet"  type="text/css" href="css/style.css" />
</head>
<body>
<div id="app">

        <div id="top">
            <div id="logo">
                <p>
                    <span>禧创OCP</span>
                </p>
                <p>
                    <span>全渠道数字平台</span>
                </p>
            </div>
            <div id="exit">
                <!-- 下拉餐单 -->
                <div  style=" position: absolute;top: 0px;right: 30px;">
                    <el-dropdown>
                <span class="el-dropdown-link" style="color: white;">
                  <i class="el-icon-user-solid"><span id="loginId"></span></i>
                </span>
                        <!-- 后续连数据库 -->
                        <el-dropdown-menu trigger="click">
                            <el-dropdown-item>水热事业部</el-dropdown-item>
                            <el-dropdown-item>厨电事业部</el-dropdown-item>
                            <el-dropdown-item>热能事业部</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <el-link icon="el-icon-switch-button" style="color: white; position: absolute;top: 10px;right:3px" href="http://localhost:8088/login1" ></el-link>
            </div>
        </div>
        <!-- 中间部分-->
        <div id="nav">
            <!-- 上方导航栏 -->
            <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-menu-item index="1"><a href="http://localhost:8088/homepage">首页</a></el-menu-item>
            </el-menu>
            <div id="neirong">
                <div id="neirongzuo">
                     <!--走马灯效果-->
                     <div class="block">
                      <el-carousel height="300px" style="width: 650px">
                          <el-carousel-item v-for="item in imglist" :key="item.id">
                             <img :src="item.idview" class="image" style="width: 650px;height: 300px"></img:src>
                          </el-carousel-item>
                      </el-carousel>
                     </div>
                <!--我的待办-->
                <div class="mytodo">
                    <table>
                        <tr><td  class="biglable" ><font size="5px">我的待办</font>/Pending Items<i class="icon-search el-icon-time" style="font-size: 30px; color: red"></i></td></tr>
                        <tr>
                            <table class="todotable" >
                             <tr>

                             <td class="todotabletd"onclick="add()" >
                                 <el-badge v-model="value1" :max="99" class="item" >
                                <i class="icon-search el-icon-tickets" style="font-size: 60px; color: red;margin-left: 25px"></i>
                                <br>
                                <a ><font size="4px" color="red" >待提交采购单</font></a>
                                 </el-badge>
                                </td>
                                <td class="todotabletd" onclick="add2()">
                                    <el-badge v-model="value2" :max="99" class="item">
                                    <i class="el-icon-paperclip" style="font-size: 60px; color: red;margin-left: 20px"></i>
                                    <br>
                                        <a ><font size="4px" color="red" > 待上传附件</font></a></el-badge>
                                </td>
                                <td class="todotabletd" onclick="add3()">
                                    <el-badge v-model="value3" :max="99" class="item">
                                    <i class="icon-search el-icon-receiving " style="font-size: 60px; color: red;margin-left: 15px"></i>
                                    <br>
                                    <a ><font size="4px" color="red" >待确认收货</font></a>
                                    </el-badge>
                                 </td>
                                </tr>
                                <tr>
                                    <td class="todotabletd2" onclick="add4()">
                                        <el-badge v-model="value4" :max="99" class="item">
                                        <i class=" el-icon-shopping-cart-full" style="font-size: 60px; color: red;"></i>
                                        <br>
                                        <a ><font size="4px" color="red">待提货</font></a>
                                        </el-badge>
                                    </td>
                                    <td class="todotabletd2" onclick="add5()">
                                        <el-badge v-model="value5" :max="99" class="item">
                                        <i class="el-icon-box" style="font-size: 60px; color: red;"></i>
                                        <br>
                                        <a >待发货</a>
                                        </el-badge>
                                    </td>

                                </tr>
                            </table>
                        </tr>
                    </table>
                </div>
                </div>
                <div id="neirongyou">
                    <!--快捷功能-->
                    <div class="Shortcuts">
                        <table>
                            <tr><td  colspan="3" class="biglableyou" ><font size="5px">快捷功能 </font>/Shortcuts <i class="el-icon-menu" style="font-size: 30px; color: red"></i>
                                <a id="littlelable">删除</a>
                            </td>
                            </tr>

                            <tr id="Shortcutsadd">
                                <td><button class="buttons">提交订单</button></td>
                                <td><button class="buttons">退换货申请</button></td>
                                <td><button class="buttonsadd"><i class="el-icon-plus"></i></button></td>

                            </tr>
                            <tr><td  colspan="3">
                                <el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs" >
                                    <el-tab-pane label="产品发布" name="first" ></el-tab-pane>
                                    <el-tab-pane label="集团新闻" name="second"></el-tab-pane>
                                </el-tabs><a id="more">更多</a>
                            </td>
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <table>
                                        <tr>
                                            <td >
                                                <img src="./img/homepage_littleimg1.jpg" class="imgs">
                                            </td>
                                            <td>
                                                <table>
                                                <tr>
                                                    <td>禧创暖系客厅家居</td>
                                                    <td width="200px">
                                                    <span style="color: #99a9bf;float: right"><font size="2px">2018-06-22</font></span>
                                                    </td>
                                                </tr>
                                                 <tr>
                                                     <td>
                                                     <span style="color: #99a9bf;"><font size="2px">12445678</font></span>
                                                     </td>
                                                 </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                <img src="./img/homepage_littleimg2.jpg" class="imgs">
                                            </td>
                                            <td>
                                                <table>
                                                    <tr>
                                                        <td>禧创欧式客厅家居</td>
                                                        <td width="200px">
                                                            <span style="color: #99a9bf;float: right"><font size="2px">2018-06-10</font></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <span style="color: #99a9bf;"><font size="2px">12445678</font></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                <img src="./img/homepage_littleimg3.jpg" class="imgs">
                                            </td>
                                            <td>
                                                <table>
                                                    <tr>
                                                        <td>禧创美式客厅家居</td>
                                                        <td width="200px">
                                                            <span style="color: #99a9bf;float: right"><font size="2px">2019-06-10</font></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <span style="color: #99a9bf;"><font size="2px">12449897</font></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td >
                                                <img src="./img/homepage_littleimg4.jpg" class="imgs">
                                            </td>
                                            <td>
                                                <table>
                                                    <tr>
                                                        <td>禧创高奢客厅家居</td>
                                                        <td width="200px">
                                                            <span style="color: #99a9bf;float: right"><font size="2px">2019-06-10</font></span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <span style="color: #99a9bf;"><font size="2px">12449897</font></span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    <!-- 侧边导航栏 -->
    <div id="left">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white">
                <!--:collapse="isCollapse"-->

            <el-submenu index="1">
                <template slot="title" class="el-submenu_title">
                    <span>订单管理</span>
                </template>

                <el-menu-item index="1-1">提交订单</el-menu-item>
                <el-menu-item index="1-2">待处理订单</el-menu-item>
                <el-menu-item index="1-3">采购订单</el-menu-item>
                <el-menu-item index="1-4">零售订单列表</el-menu-item>

            </el-submenu>
            <el-submenu index="2">
                <template slot="title" class="el-submenu_title">
                    <span>售后管理</span>
                </template>

                <el-menu-item index="2-1"><a href="ChangeGoodsApply.html">退换货申请</a></el-menu-item>
                <el-menu-item index="2-2"><a href="exchange.html">退换货订单列表</a></el-menu-item>

            </el-submenu>
            <el-submenu index="3">
                <template slot="title" class="el-submenu_title">
                    <span>产品管理</span>
                </template>

                <el-menu-item index="3-1">产品信息查询</el-menu-item>
                <el-menu-item index="3-2">库存信息管理</el-menu-item>

            </el-submenu>
            <el-submenu index="4">
                <template slot="title" class="el-submenu_title">
                    <span>会员信息</span>
                </template>

                <el-menu-item index="4-1"  @click="information">会员信息</a></el-menu-item>
                <el-menu-item index="4-2" @click="motifypass">修改密码</el-menu-item>
                <el-menu-item index="4-3" @click="AccountMessage">账号信息</a></el-menu-item>
                <el-menu-item index="4-4"><a href="subAccount.html">子账号管理</a></el-menu-item>

            </el-submenu>
            <el-submenu index="5" >
                <template slot="title" class="el-submenu_title">
                    <span>设置</span>
                </template>

                <el-menu-item index="5-1">网店设置</el-menu-item>

            </el-submenu>
        </el-menu>
    </div>
</div>

</div>
</body>
<script >
    var path=decodeURI(location.href);
    //返回某个指定的字符串值首次出现的位置
    var num=path.indexOf("?");
    var str=path.substr(num+1);
    $("#loginId").html(str);
   let vm= new Vue({
        el:"#app",
        data(){
            return{
                value1:12,
                value2:18,
                value3:11,
                value4:9,
                value5:12,
                activeIndex2: '1',
                // isCollapse: true,
                imglist: [
                          {id:0,idview:"./img/lunbo1.jpg"},
                          {id:1,idview :"./img/lunbo2.jpg"},
                          {id:2,idview :"./img/lunbo3.jpg"},
                          {id:3,idview :"./img/lunbo4.jpg"},
                        ],
                activeName: 'second',

                }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
                console.log( "handleClick");
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                console.log( "handleSelect");
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
                console.log( "handleOpen");
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
                console.log( "handleClose");
            },
            motifypass(){
                console.log("-=--------------------------------str"+str);
                location.href="http://localhost:8088/motifypass?"+str;
            },
            AccountMessage()
            {
                location.href="http://localhost:8088/AccountMeaasge?"+str;
            },
            information()
            {
                location.href="http://localhost:8088/information?"+str;
            }
        },

    });
       function add(){
      vm.value1=vm.value1+1;
    }
   function add2(){
       vm.value2=vm.value2+1;
   }
   function add3(){
       vm.value3=vm.value3+1;
   }function add4(){
       vm.value4=vm.value4+1;
   }function add5(){
       vm.value5=vm.value5+1;
   }


</script>
</html>